<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style type="text/css">
        /* 防止下拉框下拉值被遮盖*/
        .layui-table-cell, .layui-table-box, .layui-table-body {
            overflow: visible;
        }
        .layui-table-view .layui-table td, .layui-table-view .layui-table th {
            padding: 0;
        }
        .layui-table, .layui-table-view {
            margin: 0;
        }
        .layui-input, .layui-input-block {
            height: 28px;
        }
        .layui-form-select dl {
            z-index: 9000;
            padding: 0;
            top: 28px;
        }
        .layui-form-select dl dd, .layui-form-select dl dt {
            z-index: 9000;
            line-height: 20px;
        }
        .layui-form-label {
            padding: 2px 15px;
        }
    </style>
</head>
<body>
<div class="layui-row">
    <button class="layui-btn layui-btn-sm" id="getAllData">获得所有数据</button>
    <button class="layui-btn layui-btn-sm" id="btnAdd">新增一行</button>
    <button class="layui-btn layui-btn-sm" id="btnDelete">删除选中一行</button>
</div>
<div class="layui-row">
    <form class="layui-form">
        <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 layui-col-lg2">
            <select name="method" lay-filter="method" lay-verify="required" data-value="GET">
                <option value="GET">GET</option>
                <option value="POST">POST</option>
                <option value="PUT">PUT</option>
                <option value="PATCH">PATCH</option>
                <option value="DELETE">DELETE</option>
            </select>
        </div>
        <div class="layui-col-xs10 layui-col-sm10 layui-col-md10 layui-col-lg10">
            <div>
                <label class="layui-form-label">URL地址</label>
                <div class="layui-input-block">
                    <input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
    </form>
</div>
<table id="grid" lay-filter="grid"></table>
<textarea name="content" id="demo" placeholder="请输入SQL语句，该模板由freemarker模板引擎解析" class="layui-textarea" lay-verify="content" rows="20" style="margin-top: 10px;"></textarea>
<script src="https://www.layuicdn.com/layui-v2.5.6/layui.all.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
    layui.use(['table', 'layer', 'element', 'jquery', 'form'], function (table, layer, element, $, form) {
        var jsonData = [
            { id: 1, name: "参数1", city: '北京09', format: '', location: 'url' },
            { id: 2, name: "参数2", city: '北京08', format: '', location: 'body' },
            { id: 2, name: "参数2", city: '北京08', format: '', location: 'body' },
            { id: 3, location: 'path' },
            { id: 4, location: 'path' },
        ];

        // layui.form.render('select','methodSelect');
        var check = 0;
        //监听单元格编辑
        table.on('edit(grid)', function(obj) {
            var value = obj.value //得到修改后的值
                ,data = obj.data      //得到所在行所有键值
                ,field = obj.field;   //得到字段
            check++;
            if (check%2==0) { // 表示校验通过

            } else { // 表示校验不通过
                layer.msg('校验不通过', {time: 1000});
                oldValue = $(this).prev().text(); //得到修改前的值
                $(".layui-table-edit").val(oldValue);
            }

            // var regExp = 正则表达式自己写;
            // if(regExp.test(value) || value==""){
            //     // $.post('{:url(\'setLocalIp\')}',{name:data.name,param:field,v:value},function(data){
            //     //     if(data.code==1){
            //     //         layer.msg(data.msg);
            //     //     }else{
            //     //         layer.msg(data.msg);
            //     //     }
            //     // });
            // } else {
            //     layer.msg('请重新输入', {icon: 2});
            // }
            //layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
        });

        // 监听修改update到表格中
        form.on('select(selectLocation)', function (data) {
            var elem = $(data.elem);
            var trElem = elem.parents('tr');
            var tableData = table.cache['grid'];
            // 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值
            tableData[trElem.data('index')][elem.attr('name')] = data.value;
            // 其他的操作看需求 TODO
        });
        // 监听修改update到表格中
        form.on('select(selectParamType)', function (data) {
            var elem = $(data.elem);
            var trElem = elem.parents('tr');
            var tableData = table.cache['grid'];
            // 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值
            tableData[trElem.data('index')][elem.attr('name')] = data.value;
            // 其他的操作看需求 TODO
        });
        // 监听修改update到表格中
        form.on('select(selectCity)', function (data) {
            var elem = $(data.elem);
            var trElem = elem.parents('tr');
            var tableData = table.cache['grid'];
            // 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值
            tableData[trElem.data('index')][elem.attr('name')] = data.value;
            // 其他的操作看需求 TODO
        });

        //删除一行
        $("#btnDelete").click(function() {
            // 通过下标index选出被删除的行
            var data = layui.table.cache["grid"];
            var newData = [];
            var delData = [];
            for (var i=0; i<data.length; i++) {
                if (data[i].LAY_CHECKED==null || data[i].LAY_CHECKED==undefined) {
                    newData.push(data[i]);
                } else {
                    delData.push(data[i]);
                }
            }
            if (delData.length==0) {
                layer.msg('请勾选数据', {time: 1000});
            } else {
                table.reload('grid', {
                    data: newData
                });
            }

            // // 方法二，通过每条记录的唯一id来删除数据
            // var checkStatus = table.checkStatus('grid'); //test即为基础参数id对应的值
            // console.log(checkStatus.data.length);
            // if (checkStatus.data.length==0) {
            //     layer.msg('请勾选数据', {time: 1000});
            // } else {
            //     dataList = layui.table.cache["grid"];
            //     for (var k = 0; k < checkStatus.data.length; k++) {
            //         var delId = checkStatus.data[k].id;
            //         for (var i = 0; i < dataList.length; i++) {
            //             if (dataList[i].id == delId) {
            //                 dataList.splice(i, 1);
            //                 break;
            //             }
            //         }
            //     }
            //     table.reload('grid', {
            //        data: dataList
            //     });
            // }
        });

        $('#getAllData').click(function () {
            // 验证一下下拉选择之后有没有作用到表格缓存数据
            var checkStatus = table.checkStatus('grid'); //test即为基础参数id对应的值
            console.log(checkStatus.data); //获取选中行的数据
            console.log(checkStatus.data.length); //获取选中行数量，可作为是否有选中行的条件
            console.log(checkStatus.isAll); //表格是否全选
            alert(JSON.stringify(layui.table.cache["grid"]));
        });

        //新增一行
        $("#btnAdd").click(function() {
            var data1={ id: 20, name: "参数3", city: '北京08', location: 'body' };
            layui.table.cache["grid"].push(data1);
            table.reload('grid', {
                data: layui.table.cache["grid"]
            });

            // layui.table.cache["grid"].push(data1);
            //  table.reload('grid', {
            //     data : layui.table.cache["grid"]
            //  });
        });

        var tableIns = table.render({
            elem: '#grid',
            // width: 600,
            // height: 30000,
            limit: 1000,
            data: jsonData,
            done: function (res, curr, count) {
                count || this.elem.next('.layui-table-view').find('.layui-table-header').css('overflow', 'visible');
                layui.each($('select'), function (index, item) {
                    var elem = $(item);
                    elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
                });
                form.render();
            },
            size: 'md',
            cols: [[ //表头
                {type: 'checkbox', fixed: true},
                {field: 'id', title: 'ID', fixed: true, edit: 'text'},
                {field: 'name', title: '参数名', fixed: true, edit: 'text'},
                {field: 'describe', title: '参数描述', fixed: true, edit: 'text'},
                {
                    field: 'location',
                    title: '参数位置',
                    templet: function (d) {
                        // 模板的实现方式也是多种多样，这里简单返回固定的
                        return '<select name="location" lay-filter="selectLocation" lay-verify="required" data-value="' + d.location + '" >\n' +
                            '    <option value="url">url</option>\n' +
                            '    <option value="body">body</option>\n' +
                            '    <option value="path">path</option>\n' +
                            '</select>';
                    }
                },
                {
                    field: 'paramType',
                    title: '转成的类型',
                    templet: function (d) {
                        // 模板的实现方式也是多种多样，这里简单返回固定的
                        return '<select name="paramType" lay-filter="selectParamType" lay-verify="required" data-value="' + d.paramType + '" >\n' +
                            '    <option value="String">String</option>\n' +
                            '    <option value="TimeStamp">TimeStamp</option>\n' +
                            '    <option value="Boolean">Boolean</option>\n' +
                            '    <option value="Integer">Integer</option>\n' +
                            '    <option value="Long">Long</option>\n' +
                            '    <option value="Double">Double</option>\n' +
                            '    <option value="Float">Float</option>\n' +
                            '    <option value="StringArr">StringArr</option>\n' +
                            '    <option value="IntegerArr">IntegerArr</option>\n' +
                            '    <option value="LongArr">LongArr</option>\n' +
                            '</select>';
                    }
                },
                {
                    field: 'city',
                    title: '城市',
                    templet: function (d) {
                        // 模板的实现方式也是多种多样，这里简单返回固定的
                        return '<select name="city" lay-filter="selectCity" lay-verify="required" data-value="' + d.city + '" >\n' +
                            '        <option value="北京01">北京01</option>\n' +
                            '        <option value="北京02">北京02</option>\n' +
                            '        <option value="北京03">北京03</option>\n' +
                            '        <option value="北京04">北京04</option>\n' +
                            '        <option value="北京05">北京05</option>\n' +
                            '        <option value="北京06">北京06</option>\n' +
                            '        <option value="北京07">北京07</option>\n' +
                            '        <option value="北京08">北京08</option>\n' +
                            '        <option value="北京09">北京09</option>\n' +
                            '        <option value="北京10">北京10</option>\n' +
                            '        <option value="北京11">北京11</option>\n' +
                            '        <option value="北京12">北京12</option>\n' +
                            '        <option value="北京13">北京13</option>\n' +
                            '        <option value="北京14">北京14</option>\n' +
                            '        <option value="北京15">北京15</option>\n' +
                            '        <option value="北京16">北京16</option>\n' +
                            '        <option value="北京17">北京17</option>\n' +
                            '        <option value="北京18">北京18</option>\n' +
                            '        <option value="北京19">北京19</option>\n' +
                            '   </select>';
                    }
                }
            ]]
        });
    });

</script>

</body>
</html>
